<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 动态折线图示例</title>
    <!-- 引入 ECharts 文件 -->
    <script src="{{url_for('static',filename='echarts.min.js')}}"></script>
</head>
<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px; height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的 DOM，初始化 echarts 实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '动态折线图示例'
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '数据',
                data: [],
                type: 'line',
                smooth: true,
                animationDurationUpdate: 100 // 增加过渡动画的平滑度
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        // 动态更新数据
        function updateData() {
            var now = new Date();
            option.xAxis.data.push(now.toLocaleTimeString());
            option.series[0].data.push(Math.random() * 100);
            
            if (option.xAxis.data.length > 20) {
                option.xAxis.data.shift();
                option.series[0].data.shift();
            }
            
            myChart.setOption(option, true);
        }

        // 每5秒更新一次数据
        setInterval(updateData, 1000);
    </script>
</head>
<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px; height:400px;"></div>
</body>
</html>